import React from "react";
import { Form, Button, Input, Upload } from "antd";
import styles from "./UploadBigFile.less";
import { PlusOutlined } from "@ant-design/icons";
import request from "../utils/request";
import BigFileUploadDD from "./BigFileUploadDD";

export default function UploadBigFile() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    form.validateFields().then((values) => {
      request.post("/form1", values).then((res) => {
        console.log(res);
      });
    });
  };

  const onChange1 = (value) => {
    console.log(value);
  };

  return (
    <div className={styles.UploadBigFile}>
      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" onFinish={onFinish}>
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="Upload" name="fileName">
          <BigFileUploadDD uploadUrl="/upload" splitFileSize={5 * 1024 * 1024}></BigFileUploadDD>
        </Form.Item>
        <Form.Item label="Button">
          <Button type="primary" htmlType="submit">
            Button
          </Button>
        </Form.Item>
      </Form>

      <div style={{ width: "100%", border: "1px solid red" }}></div>

      <BigFileUploadDD
        value={""}
        onChange={onChange1}
        uploadUrl="/upload"
        splitFileSize={5 * 1024 * 1024}
      ></BigFileUploadDD>
    </div>
  );
}
